<template>
	<div class="view">
		<div class="Box">
			<view class="left">
				<scroll-view class="list" :enhanced="true" :show-scrollbar="false" :scroll-y="true"
					v-for="(item, index) in list" :key="index" :class="active === index ? 'is-select' : 'no-select'"
					@click="btnCheck(index)">
					<p class="text" :class="active === index ? 'is-check' : 'no-check'">
						{{ type == '1' ? item.departmentName : item.hospitalName }}
					</p>
				</scroll-view>
			</view>
			<div class="right">
				<span @click="to(item)" v-for="(item, index) in details"
					:key="index">{{ type == '1' ? item.diseaseName : item.departmentName }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import sidebar from '@/components/sidebar.vue';
	import {
		getListByTree,
		getListByCommonStatus,
		getDepartmentDisease,
		getHospitalList,
		getHospitalDepartmentsList
	} from '@/apis/request.js';

	export default {
		components: {
			sidebar
		},
		data() {
			return {
				active: 0,
				activeKey: 0,
				list: [{
					id: '',
					hospitalName: '',
					departmentName: '常见疾病'
				}],
				details: [],
				type: '',
				hospitalId: '',
				cityId: 350200
			};
		},
		methods: {
			async getlist(type) {
				// 获取左侧菜单栏列表
				if (this.type == '1') {
					const list = await getListByTree();
					this.list.push(...list);
					this.getdetails();
				} else {
					this.list = await getHospitalList({
						cityId: this.cityId
					});
					this.getdetails(this.list[0].id);
					this.hospitalId = this.list[0].id;
				}
			},
			async getdetails(id = '') {
				if (this.type == 1) {
					if (id) {
						this.details = await getDepartmentDisease({
							departmentId: id
						});
					} else {
						this.details = await getListByCommonStatus({});
					}
				} else {
					this.details = await getHospitalDepartmentsList({
						hospitalId: id
					});
				}
			},
			// 点击左侧
			btnCheck(index) {
				if (index === this.active) return;
				this.active = index;
				this.hospitalId = this.list[index].id;
				this.getdetails(this.list[index].id);
			},
			select(id) {
				this.hospitalId = id;
				this.getdetails(id);
			},
			to(data) {
				var params = '';
				if (this.type == '1') {
					params = 'diseaseId=' + data.id + '&type=1' + '&keyWord=' + data.diseaseName;
				} else {
					params = 'diseaseId&departmentId=' + data.id + '&hospitalId=' + this.hospitalId + '&type=2'
				}
				uni.navigateTo({
					url: '/pages/IndexPages/searchRes/main?' + params
				});
			}
		},
		onLoad(options) {
			this.type = options.type;
			this.cityId = uni.getStorageSync('city').id;
			this.getlist();
			if (this.type == '1') {
				wx.setNavigationBarTitle({
					title: '按疾病找'
				});
			} else {
				wx.setNavigationBarTitle({
					title: '按医院找'
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view {
		.Box {
			display: flex;

			.left {
				width: 190rpx;

				.list {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #f8f8f8;

					.text {
						width: 100%;
						text-align: center;
						font-size: 26rpx;
					}

					.is-check {
						color: $uni-color-primary;
						border-left: 6rpx solid $uni-color-primary;
					}

					.no-check {
						color: #020202;
						border-left: 6rpx solid #fafafa;
					}
				}

				.is-select {
					background-color: #fff;
				}

				.no-select {
					background-color: #fafafa;
				}
			}

			.right {
				position: fixed;
				top: 0;
				left: 190rpx;
				width: calc(100vw - 190rpx);
				height: 100vh;
				overflow-x: hidden;
				overflow-y: scroll;
				background-color: #ffffff;

				span {
					padding: 10rpx 20rpx;
					border: 2rpx solid #e8e8e8;
					border-radius: 10rpx;
					color: #333333;
					font-size: 26rpx;
					margin: 0rpx 20rpx 10rpx;
					display: inline-block;
				}
			}
		}
	}
</style>